<template>
    <view class="allBox">
        <scroll-view class="scroll_view" scroll-x="true" @scrolltolower="scrolltolower" >
            <view v-for="(journalItem, index) in columnData" :key="index">
                <view
                    class="journalItem"
                    v-for="item in journalItem"
                    :key="item.id"
                    @click="gotoDetail(item)"
                >
                    <view class="imgLayout">
                        <image
                            class="img"
                            :src="item.happen_path"
                            mode="scaleToFill"
                        />
                    </view>
                    <view class="journalLayout">
                        <view class="header">
                            <view class="title">{{ $u.timeFormat(item.createTime, "mm-dd") }}</view>
                            <view class="weather">
                                <image
                                    class="img"
                                    :src="item.weather_path"
                                    mode="heightFix"
                                />
                            </view>
                        </view>
                        <view class="content">
                            {{ item.title  }}
                        </view>
                        <view class="footer">
                            <view
                                class="planStatus"
                                v-if="item.plan_status === 0"
                                >Planed</view
                            >
                            <view
                                class="planStatus actioning"
                                v-if="item.plan_status === 1"
                            >
                                Actioning</view
                            >
                            <view
                                class="planStatus complete"
                                v-if="item.plan_status === 2"
                            >
                                Complete
                            </view>
                            <view class="mood">
                                <image
                                    class="img"
                                    :src="item.mood_path"
                                    mode="heightFix"
                                />
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { toast } from '@/common';
export default {
    data() {
        return {
            noneJournal:false
        };
    },
    methods: {
        ...mapActions("journalStore" , ['getAllJournalAction']),
        gotoDetail(item) {
            const jounalData = JSON.stringify(item);
            uni.$u.route("/pages_second/journalDeatil/journalDeatil", {
                jounalData,
            });
        },
        
        async scrolltolower(){
            uni.$on('noneJournal' , (res)=>{
                this.noneJournal = true
            })
            if(!this.noneJournal){
                console.log('这里执行');
                this.pageOption.limit =this.pageOption.limit*2
                await this.getAllJournalAction()
            }else{
                toast({ title: "没有更多数据了~" });
            }
        }
    },
    onLoad() {},
    computed: {
        ...mapState("journalStore", ["journalList" ,"pageOption"]),
        columnData() {
            const resultArray = this.journalList.reduce(
                (acc, cur, index) => {
                    const targetIndex = index % 2;
                    acc[targetIndex].push(cur);
                    return acc;
                },
                Array.from(Array(2), () => [])
            );
            console.log(resultArray);
            return resultArray;
        },
    },
};
</script>

<style lang="scss" scoped>
.allBox {
    display: flex;
    flex-wrap: wrap;
    .scroll_view {
        white-space: nowrap;
    }
}
.journalItem {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 26rpx 52rpx;
    background: #fff;
    border-radius: 24rpx;
    margin-bottom: 48rpx;
    margin-right: 48rpx;
    box-shadow: 6rpx 6rpx 20rpx #ccc;

    .imgLayout {
        width: 128rpx;
        height: 128rpx;
        margin-right: 40rpx;
        margin-bottom: 16rpx;
        .img {
            width: 100%;
            height: 100%;
        }
    }
    .journalLayout {
        width: 240rpx;
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title {
                font-size: 32rpx;
                font-weight: bold;
            }
            .weather {
                .img {
                    height: 48rpx;
                }
            }
        }
        .content {
            font-size: 28rpx;
            color: #8b8b8b;
            margin: 12rpx 0;
            white-space: nowrap;
            max-width: 240rpx;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .planStatus {
                background: #e5ebfc;
                padding: 6rpx 12rpx;
                color: #446acd;
                font-weight: bold;
                border-radius: 12rpx;
            }
            .actioning {
                background: #fff1e4;
                color: #ff942f;
            }
            .complete {
                background: #e1d0e8;
                color: #d299b7;
            }
            .mood {
                .img {
                    height: 64rpx;
                }
            }
        }
    }
}
</style>
